<template>
  <!--参数取值必须在标签内。不能单独在template内-->
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>日程查找</span>
        <el-button style="float: none; padding: 3px 0" type="text" v-on:click="scheduleQuery()">查询</el-button>
      </div>
      <div class="text item">
        {{'日程关键字：'}}<el-input style="width:200px" v-model="userform.key" ></el-input>
      </div>
    </el-card>
     <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>查询结果</span>
            <el-button style="float: none;" type="text" v-on:click="exportExcel()">导出excel</el-button>
          </div>
          <el-table id="Schedule" :data="schedule" stripe border >
            <el-table-column label="序号" align="center" width="78">
              <template slot-scope="scope">
                <span>{{ scope.$index }}</span>
              </template>
            </el-table-column>
            <el-table-column label="日程事项" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.matter }}</span>
              </template>
            </el-table-column>
            <el-table-column label="日程时间" align="center">
              <template slot-scope="scope">
               <span>{{ scope.row.ltem_time }}</span>
              </template>
            </el-table-column>
            <el-table-column label="日程添加时间" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.add_time }}</span>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
  </div>
</template>
<script>
import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
  name: "ScheduleQuery",
  props:['id'],
  data() {
    return {
        userform:{        key:'',

    },
    schedule:[]
    }
  },
    methods: {
      show() {
        console.log(this.$route.params.id)
      },
      scheduleQuery(){
      var url='/schedule/query';
      this.$http.get(url,{params:this.userform}).then((res) =>{
              console.log(res);
              var jsonObject = res.data;
              this.schedule=jsonObject.schedules;
          })
          .catch((err) => {
                        this.$notify.error({
                          title: "错误",
                          message: "服务器内部错误",
                        });
                      });
      },
    exportExcel () {
        /* generate workbook object from table */
         let xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
         let wb = XLSX.utils.table_to_book(document.querySelector('#Schedule'), xlsxParam);
         /* get binary string as output */
         let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' });
         try {
             FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), 'schedule.xlsx');
         } catch (e)
         {
             if (typeof console !== 'undefined')
                 console.log(e, wbout)
         }
         return wbout
     }
    }
}
</script>
<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 1200px;
}
</style>
